<template>
  <div class="gather_one_org">
    <div class="section">
      <div class="info_time" @click="goToGather">
        <div class="info">
          <div class="info_right">考勤汇总</div>
        </div>
        <van-icon name="arrow" />
      </div>
      <div class="info_time">
        <div class="info">
          <div class="info_right">
            <div class="info_right_top">{{ departInfo.orgName }}</div>
          </div>
        </div>
        <div class="time" @click="timeChoose(dutyTime)">
          {{ dutyTime }}
          <van-icon name="arrow-down" />
        </div>
      </div>
      <div class="self_head">
        <!-- <span>每日统计（{{ dutyMonth }}月）</span> -->
        <span>每日统计</span>
      </div>
      <Calendar ref="calendar" pageTypes="2" @selectDate="selectDate"></Calendar>
      <div @click="goOutDetail('12')" v-if="!isFuture">
        <PanelProgress ref="panelProgress"></PanelProgress>
      </div>
      <div class="section_info" v-if="!isFuture">
        <div class="tab_title" @click="goOutDetail('1')">
          <div class="num">{{ dutyStaticsOne.lateCount || 0 }}</div>
          <div class="word">迟到</div>
        </div>
        <div class="tab_title" @click="goOutDetail('2')">
          <div class="num">{{ dutyStaticsOne.leaveEarlyCount || 0 }}</div>
          <div class="word">早退</div>
        </div>
        <div class="tab_title" @click="goOutDetail('4')">
          <div class="num">{{ dutyStaticsOne.neglectWorkCount || 0 }}</div>
          <div class="word">旷工</div>
        </div>
        <div class="tab_title" @click="goOutDetail('8')">
          <div class="num">{{ dutyStaticsOne.leaveCount || 0 }}</div>
          <div class="word">请假</div>
        </div>
        <div class="tab_title" @click="goOutDetail('9')">
          <div class="num">{{ dutyStaticsOne.outWorkCount || 0 }}</div>
          <div class="word">外出</div>
        </div>
        <div class="tab_title" @click="goOutDetail('5')">
          <div class="num">{{ dutyStaticsOne.overTimeCount || 0 }}</div>
          <div class="word">加班</div>
        </div>
        <div class="tab_title" @click="goOutDetail('7')">
          <div class="num">{{ dutyStaticsOne.leaveOffCount || 0 }}</div>
          <div class="word">调休</div>
        </div>
      </div>
      <div class="section_info" v-else>
        <div class="empty">暂无数据！</div>
      </div>
    </div>

    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="请选择时间"
        :min-date="minDate"
        @cancel="showTime = false"
        @confirm="timeConfirm" />
    </van-popup>
  </div>
</template>

<script>
import { getAttendanceSumOrg } from '@api/api-attendance.js'
import Calendar from '../components/calendar.vue'
import PanelProgress from '../components/PanelProgress.vue'
import moment from 'moment'
export default {
  name: 'StaticsGatherOneOrg',
  components: {
    Calendar,
    PanelProgress,
  },
  data() {
    return {
      dutyYear: '',
      dutyMonth: '',
      departInfo: {},
      isFuture: false,
      showTime: false, //是否展示时间弹出层
      minDate: new Date(2023, 0, 1), // 最小限制时间
      listTime: '',
      dutyTime: '', // 统计选择时间
      dutyDayInfo: {}, // 选择日期的信息
      dutyStaticsOne: {}, //统计信息-当日
      calendarOneDays: '', // 日历上的数据
      currentDate: '',
    }
  },
  created() {
    this.dutyYear = this.$route.query.year
    this.dutyMonth = this.$route.query.month
    this.departInfo = JSON.parse(this.$route.query.item)
    this.listTime = moment(`${this.$route.query.year}-${this.$route.query.month}`).format('YYYY-MM')
    this.dutyTime = moment(`${this.$route.query.year}-${this.$route.query.month}`).format('YYYY年MM月')
    this.getOrgTimes()
    console.log(this.departInfo)
  },
  mounted() {
    this.$refs.calendar.getHeight()
  },
  methods: {
    getOrgTimes() {
      let data = {
        info: [],
        time: this.listTime,
      }
      this.$nextTick(() => {
        this.$refs.calendar.calendarShowData(data)
      })
    },
    // 获取日历数据部门-统计数据
    orgCalendarStatistics() {
      getAttendanceSumOrg({
        startTime: this.calendarOneDays,
        endTime: this.calendarOneDays,
        userId: '',
        orgId: this.departInfo.orgId,
      }).then(res => {
        if (res.status === 200) {
          this.dutyStaticsOne = res.data
          this.$nextTick(() => {
            this.$refs.panelProgress.getData(res.data)
          })
        }
      })
    },
    // 获取当前日的信息
    selectDate(data) {
      this.isFuture = false
      if (new Date(this.dutyYear, this.dutyMonth - 1, data.content).getTime() < new Date(2021, 2, 1).getTime()) {
        this.isFuture = true
      }
      if (new Date(this.dutyYear, this.dutyMonth - 1, data.content).getTime() > new Date().getTime()) {
        this.isFuture = true
      }

      if (this.isFuture) {
        this.dutyDayInfo = {
          levelName: '',
          content: data.content,
        }
      } else {
        this.calendarOneDays = data.timeOne
        this.orgCalendarStatistics()
      }
    },

    // 时间确定
    timeConfirm() {
      this.showTime = false
      this.dutyTime = moment(this.currentDate).format('YYYY年MM月')
      this.listTime = moment(this.currentDate).format('YYYY-MM')
      this.getOrgTimes()
      this.dutyYear = moment(this.currentDate).format('YYYY')
      this.dutyMonth = moment(this.currentDate).format('MM')
    },

    // 跳转考勤明细
    goOutDetail(type1) {
      this.$router.push({
        path: '/outAllPages',
        query: {
          pageTypes: '2',
          typeTabs: type1,
          timesDay: this.calendarOneDays,
          infos: JSON.stringify(this.dutyStaticsOne),
          orgId: this.departInfo.orgId,
        },
      })
    },
    // 跳转考勤统计-部门
    goToGather() {
      this.$router.push({
        path: '/outAllPages',
        query: { pageTypes: '3', year: this.dutyYear, month: this.dutyMonth, orgId: this.departInfo.orgId },
      })
    },

    timeChoose(time) {
      this.showTime = true
      this.currentDate = moment(time).format('YYYY-MM')
    },
  },
}
</script>

<style lang="scss" scoped>
.gather_one_org {
  font-size: 13px;
  background-color: #f9f9f9;
  padding: 10px;
  min-height: 98%;
  /deep/ .van-popup {
    position: absolute;
  }
  .section {
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    padding-bottom: 10px;
    .info_time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #efefef;
      .info {
        color: #333333;
        padding: 6px 15px;
        .info_right {
          font-size: 14px;
          font-weight: bold;
          .info_right_top {
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
      .time {
        font-size: 12px;
        color: #333;
        margin-right: 10px;
      }
      /deep/.van-icon-arrow {
        font-size: 14px;
        margin-right: 13px;
      }
    }

    .self_head {
      color: #333333;
      font-size: 14px;
      font-weight: bold;
      padding: 10px 0;
      margin: 0 15px;
      border-bottom: 0.01333rem solid #efefef;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .info_time {
        border-bottom: none;
        font-weight: normal;
      }
    }
    .section_info {
      background-color: #f7f7f7;
      margin: 0 15px;
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .tab_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #333333;
        font-size: 12px;
        .num {
          color: #ad7316;
          font-size: 19px;
        }
      }
      .empty {
        font-size: 12px;
      }
    }
    .depart_info {
      font-size: 12px;
      color: #333333;
      padding: 0 5px;
      margin-top: 16px;
      /deep/.van-col {
        text-align: center;
        &:first-child {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .head {
        color: #999999;
      }
      .cont_box {
        margin-right: 20px;
        margin-top: 5px;
        .cont {
          padding: 9px 0;
        }
      }
    }
  }
}
</style>
